<script setup lang="ts">
import { reactive } from 'vue';
import { showLoading, showModal } from '@tarojs/taro';
import {
  REJECT_APP_FLOW_PATH_RECORD,
  ACCEPT_APP_FLOW_PATH_RECORD,
} from '/@/api/modules/flow-path/flow-path';
const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    /**
     * agree/refuse
     */
    status: 'agree' | 'refuse';
    /**
     * 审计节点id
     */
    approveId: string;
    /**
     * 是否需要签名
     */
    isSignature?: 1 | 2;
    /**
     *审批记录表单属性信息
     */
    attributes?: FlowPathTemplateApi.AttributeExtendDto[];
  }>(),
  {
    modelValue: false,
    status: 'agree',
    approveId: '',
  },
);

const emits = defineEmits<{
  (e: 'update:modelValue'): void;
  (e: 'refresh'): void;
}>();
const state = reactive<{
  /**
   * 方签名url地址
   */
  signUrl: string;
  /**
   * 审批意见
   */
  opinion?: string;
}>({
  signUrl: '',
  opinion: '',
});

/**
 @function 上传文件 领用方
 * @param imageUrl
 */
function uploadImageChangeByReceiver(imageUrl: { key: string; src: string } | null) {
  state.signUrl = imageUrl ? imageUrl.src : '';
}

/**
 * 同意/拒绝后统一处理
 */
function resultHandle() {
  emits('refresh');
  emits('update:modelValue');
  state.signUrl = '';
  state.opinion = '';
}

function agreeHandle() {
  showLoading();
  ACCEPT_APP_FLOW_PATH_RECORD({
    approveDto: { id: props.approveId, opinion: state.opinion, approverSign: state.signUrl },
    flowpathRecordDto: { attributes: props.attributes },
  }).then((res) => {
    if (res.comResp?.code === 100) {
      resultHandle();
    }
  });
}
/**
 *同意
 */
function agree() {
  showModal({
    title: '审批同意',
    content: '您确定审批同意吗？',
    success: function (response) {
      if (response.confirm) {
        agreeHandle();
      }
    },
  });
}

function refuseHandle() {
  showLoading();
  REJECT_APP_FLOW_PATH_RECORD({
    approveDto: { id: props.approveId, opinion: state.opinion },
    flowpathRecordDto: { attributes: props.attributes },
  }).then((res) => {
    if (res.comResp?.code === 100) {
      resultHandle();
    }
  });
}
/**
 *拒绝
 */
function refuse() {
  showModal({
    title: '审批拒绝',
    content: '您确定审批拒绝吗？',
    success: function (response) {
      if (response.confirm) {
        refuseHandle();
      }
    },
  });
}
/**
 * 回复
 */
function reply(content: string) {
  state.opinion = content;
  console.log('content', content);
}
</script>
<template>
  <nut-popup
    round
    position="bottom"
    :visible="modelValue"
    @click-overlay="
      () => {
        state.opinion = '';
        emits('update:modelValue');
      }
    "
  >
    <view class="approve-popup__wrapper">
      <nut-form>
        <nut-form-item label="审批意见" />
        <nut-form-item>
          <nut-textarea
            v-model="state.opinion"
            placeholder="填写审批意见"
            rows="8"
            limit-show
            text-align="left"
            max-length="200"
          />
        </nut-form-item>
        <nut-form-item label="签字" v-if="props.isSignature === 1">
          <app-upload-signature
            @on-change="uploadImageChangeByReceiver"
            height="80px"
            signPage="/pages/my-approve/sign/index?event=onCanvas"
            event="onCanvas"
            module="approved"
          />
        </nut-form-item>
        <nut-form-item>
          <template #default>
            <view class="approve-popup__reply"> 推荐回复 </view>
            <template v-if="props.status === 'agree'">
              <nut-space class="approve-popup__reply-content" wrap>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('同意')">同意</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('确认')">确认</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('OK')">OK</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('情况属实')"
                  >情况属实</nut-tag
                >

                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('已审核')">已审核</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('好的')">好的</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('通过')">通过</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('已核实')">已核实</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('可以')">可以</nut-tag>
              </nut-space>
            </template>
            <template v-else>
              <nut-space class="approve-popup__reply-content" wrap>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('拒绝')">拒绝</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('不同意')">不同意</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('取消')">取消</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('作废')">作废</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('重复提交')"
                  >重复提交</nut-tag
                >
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('未解决')">未解决</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('请核实')">请核实</nut-tag>
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('请补充材料')"
                  >请补充材料</nut-tag
                >
                <nut-tag color="#E9E9E9" text-color="#333" @click="reply('时间不对')"
                  >时间不对</nut-tag
                >
              </nut-space>
            </template>
          </template>
        </nut-form-item>
      </nut-form>

      <view class="approve-popup__footer">
        <nut-button
          class="approve-popup__footer-btn"
          type="info"
          @click="agree()"
          v-if="props.status === 'agree'"
          >确认同意</nut-button
        >
        <nut-button class="approve-popup__footer-btn" type="danger" @click="refuse()" v-else
          >确认拒绝</nut-button
        >
      </view>
    </view>
  </nut-popup>
</template>
<style lang="scss">
.approve-popup {
  &__wrapper {
    padding: 40px 0;
    background-color: #fff;
  }
  &__reply {
    color: #999;
    margin-bottom: 20px;
  }
  &__reply-content {
    margin-bottom: 10px;
  }
  &__footer {
    padding: 20px 10px;
    background-color: #fff;
    display: flex;
  }

  &__footer-btn {
    flex: 1;
    margin: 0 10px;
  }
}
</style>
